/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  TableRow, CCell, Table, TableBody, Text, RCell, useTheme, Embed
} from "customize-easy-ui-component";
import {DirectLink, Link as RouterLink,} from "../../../routing/Link";
import Img_Seal from "../../../images/seal.png";
import {useMedia} from "use-media";
import {eqpTypeAllMap} from "../../../dict/eqpComm";
import {型试落款地址} from "../../common/rarelyVary";
import {FadeImage} from "../../../comp/FadeImage";
import Img_Cnas from "../../../images/CNAS.png";
import Img_ReportNoQR from "../../../images/reportNoQR.png";

export const 型试编制核准= ({ orc,rep,jyprf='下次定期检验'} : { orc: any, rep:any,jyprf?:string}
) => {
  return <Table fixed={  ["8.2%","48%","4.3%","11%","%"]  }  css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
    <TableBody>
      <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion`}>
        <TableRow>
          <CCell>试验负责人</CCell>
          <CCell>{orc.检验人IDs}</CCell>
          <CCell>日期</CCell>
          <CCell>{orc.检验日期 || '／'}</CCell>
          <CCell rowSpan={3}>
            <div css={{
              height:'7rem',
              '::before': {
                filter: 'opacity(30%)',
                width: '100%',
                height: '100%',
                backgroundImage: `url(${Img_Seal})`,
                content: '" "',
                position: 'absolute',
                top: 0,
                left: 0,
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
              }
            }}>
              <Table  fixed={ ["40.7%","%"] }
                      css={ {borderCollapse: 'collapse',height:'fill-available'} }  tight  miniw={800}>
                <TableBody>
                  <TableRow>
                    <CCell css={{border:'none'}}>型式试验机构核准证号：</CCell>
                    <CCell css={{border:'none'}}>{rep?.isp?.ispu?.agency?.apno}</CCell>
                  </TableRow>
                  <TableRow>
                    <CCell css={{border:'none'}} colSpan={2}>(型式试验机构试验专用章或者公章)</CCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </CCell>
        </TableRow>
      </DirectLink>
      <TableRow>
        <CCell>审核</CCell>
        <CCell></CCell>
        <CCell>日期</CCell>
        <CCell></CCell>
      </TableRow>
      <TableRow >
        <CCell>批准</CCell>
        <CCell></CCell>
        <CCell>日期</CCell>
        <CCell></CCell>
      </TableRow>
    </TableBody>
  </Table>;
};

type AttentionPointBlProps = {
  /**报告对象*/
  rep: any
  // onClick: () => void
  children: React.ReactNode
  //第一行的 本报告 遵照“”
  comply?: any
  //最后一行 带上 报检 电话网址
  telurl?: boolean
  jaddr?: boolean
}
/*
落款：使用<Table>做的布局= 每一行高度最少也要32px;
* */
export const AttentionPointBl = ({ rep, children, comply ,telurl,jaddr}: AttentionPointBlProps) =>{
  const theme= useTheme();
  const atPrint = useMedia('print');
  return (
      <div css={{
            "@media print": {
              height: `calc(100vh - 2rem - 10pt)`,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-evenly',
              margin: '0 3rem 0',
            },
      }}>
        <div>
          <RouterLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/FrontCover#FrontCover`}>
            <Text variant={atPrint? "h3":'h5'} css={{ textAlign: 'center',
              "@media print": {marginBottom: '3rem',},
            }}>注意事项</Text>
            <Text css={{fontSize:'1.1rem',lineHeight: 0.95, "@media print": {lineHeight: 1.7},}}>
              { comply && <>
                1、本报告{comply}。<br/>
              </>
              }
              {children}
              { telurl && <>
                报检电话：{rep?.isp?.ispu?.agency?.bjtel}，网址：{rep?.isp?.ispu?.agency?.bjurl}。
              </>
              }
            </Text>
          </RouterLink>
        </div>
        {jaddr && 型试落款地址({theme,})}
    </div>
  )
};
/**特别 ，加：型式试验机构地址
 * */
export const 注意事项Balan= ( {comply, rep} :{comply: any, rep: any}
) => {
  return <AttentionPointBl rep={rep} comply={comply} jaddr>
    2、本报告应当由计算机打印输出，或者用钢笔、签字笔填写，字迹要工整，涂改无效。<br/>
    3、本报告无试验、审核、批准人员签字以及型式试验机构的核准证号、试验专用章（或者公章）和骑缝章无效。<br/>
    4、本报告一式三份，一份由型式试验机构存档，两份由申请单位保存。<br/>
    5、制造单位对型式试验结论如有异议，应当在取得本报告后15个工作日内向型式试验机构提出书面意见。<br/>
    6、本报告仅对样机有效。
  </AttentionPointBl>;
};

export const 首页概况Balan= ({theme,orc, original,dtyp} :{theme:any,orc:any, original?:boolean,dtyp:string}
) => {
  return  <Table fixed={ ["20%","%"] }  css={ {borderCollapse: 'collapse'} }  tight  miniw={800}>
    <TableBody rheight={40}>
      <TableRow>
        <RCell css={{border:'none'}}><Text>设备种类：</Text></RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}><Text>{eqpTypeAllMap.get(dtyp)}</Text></CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}><Text>设备类别：</Text></RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}><Text>{eqpTypeAllMap.get(orc?.设备类别)}</Text></CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}><Text>设备品种：</Text></RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}><Text>{eqpTypeAllMap.get(orc.设备品种)}</Text></CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}><Text>产品名称：</Text></RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}><Text>{orc.设备名称 || '／'}</Text></CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}><Text>产品型号：</Text></RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}><Text>{orc.型号 || '／'}</Text></CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}><Text>制造单位：</Text></RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}><Text>{orc.制造单位 || '／'}</Text></CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}><Text>申请单位：</Text></RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}><Text>{orc.使用单位 || '／'}</Text></CCell>
      </TableRow>
    </TableBody>
  </Table>;
};

/**CNAS特别
 * */
export const ReportFirstPageHeadCnasTypFo= ({theme, rep, mbbm,} :{theme: any, rep:any, mbbm?:string,}
) => {
  return <React.Fragment>
    <div css={{display: 'flex', justifyContent: 'space-between', textAlign: 'center', height: '11rem',}}>
      <div></div>
      <div>
        <Embed css={{width: "140px", margin: "auto"}} width={10} height={10}>
          <FadeImage src={Img_ReportNoQR}/>
        </Embed>
      </div>
      <div css={{overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
        <Text variant="h6" css={{fontSize: '0.8rem',textAlign: 'right'}}>{mbbm}</Text>
        <div css={{display:'inline-flex',overflow: 'hidden'}}>
          <div><Embed css={{width: "180px", margin: "auto", }} width={160} height={75}>
              <FadeImage src={Img_Cnas}/>
          </Embed></div>
          <div css={{textAlign:'left',lineHeight:0.9}}>
            <Text css={{fontSize:'0.75rem',fontWeight:700}}>中国认可<br/>国际互认<br/>检测<br/>TESTING<br/>CNAS L6403</Text>
          </div>
        </div>
        <div css={{display: 'flex',
          "@media (min-width:690px),print and (min-width:538px)": {
            marginRight: "1rem"
          }
        }}>
          <Text variant="h5">报告编号：</Text>
          <Text variant="h5" css={{textDecoration: 'underline'}}>{rep?.isp?.no}</Text>
        </div>
      </div>
    </div>
  </React.Fragment>;
};
